<template>
	<view class="page">
		<view class="row">
			<view class="title">
				标题
			</view>
			<view class="select">
				<input type="text" value="" placeholder="请填写标题" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row">
			<view class="title">
				类型
			</view>
			<view class="select">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input" v-if="index == -1">请选择类型</view>
					<view class="uni-input" v-else>{{array[index]}}</view>
					<view class="iconfont iconxxjtfull"></view>
				</picker>
			</view>
		</view>
		<view class="textarea-wrap">
			<view class="title">
				内容
			</view>
			<view class="textarea">
				<textarea value="" placeholder="内容" placeholder-class="placeholder" />
				</view>
		</view>
		 <!-- 图片视频上传 -->
		 <view class="uploader-wrap">
			 <view class="uploader-title">
			 	图片/视频
			 </view>
			<view class="uni-uploader-body">
			    <view class="uni-uploader__files">
			        <!-- 图片 -->
			       <block v-for="(image,index) in imageList" :key="index">
			            <view class="uni-uploader__file">
			                <view class="icon iconfont iconcha" @tap="delect(index)"></view>
			                <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
			            </view>
			        </block>
			        <!-- 视频 -->
			        <view class="uni-uploader__file" v-if="src">
			            <view class="uploader_video">
			                <view class="icon iconfont iconcha" @tap="delectVideo"></view>
			                <video :src="src" class="video"></video>
			            </view>
			        </view>
			        <view class="uni-uploader__input-box uni-uploader__file" v-if="VideoOfImagesShow">
			            <view class="iconfont iconjiahao" @tap="chooseVideoImage"></view>
			        </view>
			    </view>
			</view>
			
		 </view>
		 
		 <!-- 按钮 -->
		 <view class="btn">
		 	我要发圈
		 </view>
		
		
	</view>
</template>

<script>
	var sourceType = [
	    ['camera'],
		['album'],
	    ['camera', 'album']
	]
	export default {
		data() {
			return {
				imageList:[],//图片
				src:"",//视频存放
				sourceTypeIndex: 2,
				checkedValue:true,
				checkedIndex:0,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
				        value: 'back',
				        name: '后置摄像头',
				        checked: 'true'
				    },
				    {
				        value: 'front',
				        name: '前置摄像头'
				    },
				],
				cameraIndex: 0,
				VideoOfImagesShow:true,
				
				// select模拟数据
				index: -1,
				array: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04'],
			}
		},
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			
			chooseVideoImage(){
			                uni.showActionSheet({
			                    title:"选择上传类型",
			                    itemList: ['图片','视频'],
			                    success: (res) => {
			                        console.log(res)
			                        if(res.tapIndex == 0){
			                            this.chooseImages()
			                        } else {
			                            this.chooseVideo()
			                        }
			                    }
			                })
			            },
			            chooseImages(){
			                // 上传图片
			                uni.chooseImage({
			                    count: 4, //默认9
			                    // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			                    sourceType: ['album','camera'], //从相册选择
			                    success:(res)=> {
			                        let igmFile = res.tempFilePaths;
			                        uni.uploadFile({
			                            url:this.config.fileUrl,
			                            method:"POST",
			                            header:{
			                                'Authorization':'bearer '+ uni.getStorageSync('token'),
			                                'Content-Type':'multipart/form-data'
			                            },
			                            filePath:igmFile[0],
			                            name:'file',
			                            success: (res) =>{
			                                // let imgUrls = JSON.parse(res.data); //微信和头条支持
			                                let imgUrls = res.data //百度支持
			                                this.imagesUrlPath = this.imagesUrlPath.concat(imgUrls.result.filePath);
			                                this.imageList = this.imageList.concat(imgUrls.result.filePath); //微信
			                                if(this.imageList.length>=4) {
			                                    this.VideoOfImagesShow = false;
			                                } else {
			                                    this.VideoOfImagesShow = true;
			                                }
			                            }
			                        })
			                        // this.imageList = this.imageList.concat(res.tempFilePaths)  //头条
			                    },
			                });
			            },
			            chooseVideo(){
			                // 上传视频
			                uni.chooseVideo({
			                    maxDuration:60,
			                    count: 1,
			                    camera: this.cameraList[this.cameraIndex].value,
			                    sourceType: ['album'],
			                    success: (responent) => {
			                        let videoFile = responent.tempFilePath;
			                        uni.uploadFile({
			                            url:this.config.fileUrl,
			                            method:"POST",
			                            header:{
			                                'Authorization':'bearer '+ uni.getStorageSync('token')
			                            },
			                            filePath:videoFile,
			                            name:'file',
			                            success: (res) => {                    
			                                // let videoUrls = JSON.parse(res.data) //微信和头条支持
			                                let videoUrls = res.data //百度支持
			                                this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls.result.filePath);
			                                this.src = videoUrls.result.filePath; //微信
			                                if(this.src) {
			                                    this.itemList = ['图片']
			                                } else {
			                                    this.itemList = ['图片','视频']
			                                }
			                                
			                            }
			                        })
			                        // this.src = responent.tempFilePath;  //头条
			                    }
			                })
			            },
			            previewImage: function(e) {
			                //预览图片
			                var current = e.target.dataset.src
			                uni.previewImage({
			                    current: current,
			                    urls: this.imageList
			                })
			            },
			            delect(index){
			                uni.showModal({
			                    title: "提示",
			                    content: "是否要删除该图片",
			                    success: (res) => {
			                        if (res.confirm) {
			                            this.imageList.splice(index, 1)
			                        }
			                    }
			                })
			            },
			            delectVideo(){
			                uni.showModal({
			                    title:"提示",
			                    content:"是否要删除此视频",
			                    success:(res) =>{
			                        if(res.confirm){
			                            this.src = ''
			                        }
			                    }
			                })
			            }
		}
	}
</script>

<style lang="scss" scoped>
	@import 'publishCircle.scss';
	@import '../../common/icon/iconfont.css';
</style>
